<template>
    <div class="h_compts" :style="{ backgroundColor: bgcis0 ? 'rgba(0, 0, 0, .7)' : 'transparent' }">
        <div class="nav_left">
            <a class="logo" href="/">海螺博客</a>
            <ul class="nav_list">
                <li v-for="(item, index) in nav_list" :key="'nav_list' + index"
                    :class="{ 'active': $route.path == item.router }" @click="nav_change(item.router)">{{ item.title }}
                </li>
            </ul>
        </div>
        <slot name="login"></slot>
        <div class="gotop" @click="gotop" :style="{ display: bgcis0 ? 'flex' : 'none' }">
            <svg t="1675439756273" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="5609" width="200" height="200">
                <path
                    d="M835 396.1L533.2 94.4c-11.7-11.7-30.7-11.7-42.4 0L189 396.2c-11.7 11.7-11.7 30.7 0 42.4s30.7 11.7 42.4 0L482 188v720.3c0 16.6 13.4 30 30 30s30-13.4 30-30V188l250.5 250.5c5.9 5.9 13.5 8.8 21.2 8.8s15.4-2.9 21.2-8.8c11.8-11.6 11.8-30.6 0.1-42.4z"
                    fill="#ffffff" p-id="5610"></path>
            </svg>
        </div>
    </div>
</template>

<script>
export default {
    props: ['bgc'],
    data() {
        return {
            bgcis0: this.$route.path === '/navigation',
            this_route: this.$route.path,
            nav_list: [
                { title: '首页', router: '/' },
                { title: '生活', router: '/mylife' },
                { title: '归档', router: '/arrange' },
                { title: '关于我', router: '/about' },
                { title: '留言板', router: '/comment' },
                { title: '导航', router: '/navigation' },

            ]
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll, true)
    },

    methods: {
        handleScroll() {
            // console.log(document.documentElement.scrollTop);
            if (document.documentElement.scrollTop > 50 || this.$route.path === '/navigation') {
                //修改背景 黑色
                // console.log('改成黑色');
                this.bgcis0 = true;
            } else {
                // console.log('改成透明');
                //还原背景
                this.bgcis0 = false;
            }

        },
        gotop() {
            document.documentElement.scrollTop = 0
        },
        nav_change(router) {
            this.gotop();
            this.$router.push(router)
            this.bgcis0 = this.$route.path === '/navigation'
        }
    }
}
</script>

<style lang="less" scoped>
.h_compts {
    min-width: 1200px;
    position: fixed;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    height: 65px;
    // background-color: rgba(0, 0, 0, .7);
    padding: 0 50px;

    .nav_left {
        display: flex;
        height: 100%;

        .logo {
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 23px;
        }

        .nav_list {
            display: flex;
            align-items: center;
            margin-left: 120px;
            height: 100%;

            li {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 35px;
                margin: 0 15px;
                color: #fff;
                cursor: pointer;

                &:hover {
                    border-bottom: 1px solid #fff;
                }
            }

            // 选中的样式
            .active {
                border-bottom: 1px solid #fff;
            }
        }
    }

    .login {
        width: 30px;
        height: 30px;
    }
}

.gotop {
    position: fixed;
    right: 90px;
    bottom: 10vh;
    z-index: 2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3);

    svg {
        width: 60%;
        height: 60%;
    }
}
</style>